---
title: Quickstart
description: Get started with the Voice UI Kit
icon: "Album"
---

The Voice UI Kit is a collection of components, hooks and templates for building voice AI applications quickly.

- Designed to be used alongside the [Pipecat Client SDK](https://docs.pipecat.ai/client/introduction) or standalone via headless components.
- Minimal dependencies, no framework-specific code.
- Built on Tailwind 4 and Shadcn primitives.
- Intended to be used alongside a developer's own visual design system.


## Quickstart

Install the library:

```bash tab="npm"
npm install @pipecat-ai/voice-ui-kit
```

```bash tab="pnpm"
pnpm add @pipecat-ai/voice-ui-kit
```

```bash tab="yarn"
yarn add @pipecat-ai/voice-ui-kit
```

```bash tab="bun"
bun add @pipecat-ai/voice-ui-kit
```

For usage with Pipecat:

```bash tab="npm"
npm install @pipecat-ai/client-js @pipecat-ai/client-react
```

```bash tab="pnpm"
pnpm add @pipecat-ai/client-js @pipecat-ai/client-react
```

```bash tab="yarn"
yarn add @pipecat-ai/client-js @pipecat-ai/client-react
```

```bash tab="bun"
bun add @pipecat-ai/small-webrtc-transport 
# or
bun add @pipecat-ai/daily-transport
```

And finally, your chosen transport package:

```bash tab="npm"
npm install @pipecat-ai/small-webrtc-transport 
# or
npm install @pipecat-ai/daily-transport
```

```bash tab="pnpm"
pnpm add @pipecat-ai/small-webrtc-transport 
# or
pnpm add @pipecat-ai/daily-transport
```

```bash tab="yarn"
yarn add @pipecat-ai/small-webrtc-transport 
# or
yarn add @pipecat-ai/daily-transport
```

```bash tab="bun"
bun add @@pipecat-ai/client-js @pipecat-ai/client-react
```

## Templates

Templates are fully-featured, configurable UIs for developing for Pipecat.

They're built and composed from the core components and primitives, and are designed to be used as-is or as a starting point for your own custom UI.


```tsx title="Console template" lineNumbers
import { ThemeProvider, ConsoleTemplate } from "@pipecat-ai/voice-ui-kit";

export default function Home() {
    return (
        <ThemeProvider>
            <ConsoleTemplate
                transportType="smallwebrtc"
                connectParams={{
                    webrtcUrl: "/api/offer", 
                }}
                noUserVideo={true}
            />
        </ThemeProvider>
    );
}
```

Learn more about the Console template in the [Console template](/templates/console) section.


## Components

Components are the building blocks of the Voice UI Kit. They exist in both connected (Pipecat) and headless variants. 

```tsx title="App.tsx" lineNumbers
import {
  PipecatAppBase,
  ErrorCard,
  SpinLoader,
  Card,
  CardContent,
  Divider,
  UserAudioControl,
  ConnectButton,
  VoiceVisualizer,
  type PipecatBaseChildProps,
} from "@pipecat-ai/voice-ui-kit";

<PipecatAppBase
    connectParams={{
        webrtcUrl: "/api/offer",
    }}
    transportType="smallwebrtc"
    noThemeProvider
>
{({ client, handleConnect, handleDisconnect, error }: PipecatBaseChildProps) =>
    !client ? (
        <SpinLoader />
    ) : error ? (
        <ErrorCard>{error}</ErrorCard>
    ) : (
        <Card
            size="lg"
            shadow="xlong"
            noGradientBorder={false}
            rounded="xl"
        >
            <CardContent className="flex flex-col gap-4">
            <VoiceVisualizer
                participantType="bot"
                className="bg-accent rounded-lg"
            />
            <Divider />
            <div className="flex flex-col gap-4">
                <UserAudioControl size="lg" />
                <ConnectButton
                    size="lg"
                    onConnect={handleConnect}
                    onDisconnect={handleDisconnect}
                />
            </div>
            </CardContent>
        </Card>
    )
}
</PipecatAppBase>
```

Learn more about components in the [Components](/components/overview) section.


## Registry

Components are also available via the Shadcn CLI in the [Shadcn registry](https://ui.shadcn.com/docs/registry).

This is useful for when you want component code in your own project, to extend and customize however you wish.

<Callout>
  Registry work is currently in progress
</Callout>
